<template>
  <g>
    <path :d="d" stroke-width="3" :stroke="color" fill="none" :stroke-dasharray="dash" ref="line"/>
    <path :d="d" stroke-width="20" stroke="rgba(0, 0, 0, 0)" fill="none" ref="lineBox" v-show="state === 1" @click="click" @mouseover="mouseover" @mouseout="mouseout"/>
  </g>
</template>

<script>
export default {
  props: {
    id: {
      default: -1
    },
    nodeIds: {
      default: null
    },
    head: {
      default: () => {
        return { x: 0, y: 0 }
      }
    },
    tail: {
      default: () => {
        return { x: 0, y: 0 }
      }
    },
    stroke: {
      default: '#5F4C0B'
    },
    hoverColor: {
      default: '#B18904'
    },
    selectedColor: {
      default: '#F5DA81'
    }
  },
  data () {
    return {
      type: 'line',
      state: 0, // 是否创建完成
      isMouseOver: false, // 鼠标是否移入
      isSelected: false, // 是否被选中
      headNode: null,
      tailNode: null
    }
  },
  methods: {
    mouseover () {
      this.isMouseOver = true
    },
    mouseout () {
      this.isMouseOver = false
    },
    click (event) {
      // console.log('click')
      if (this.state === 1) { // 创建完成后方可选中
        this.$parent.singleSelect(this, event.shiftKey)
      }
      event.stopPropagation()
    },
    setSelected (isSelected = true) {
      this.isSelected = isSelected
    },
    /**
     * 标记线创建结束
     * @Author   Jiangzhiwei
     * @datetime 2021-10-21T10:32:25+0800
     */
    setOver () {
      this.state = 1
    },
    isOver () {
      return this.state === 1
    },
    remove () {
      this.$parent.removeLine(this.id)
    },
    /**
     * 更新连线的首位节点 仅在连线创建结束后
     * @param  {String} nodeIds 节点id，如：,1,2,
     * @author Jiangzhiwei
     * @time   2021-11-03T00:32:04+0800
     */
    refreshNodes (nodeIds) {
      if (typeof nodeIds === 'string' && nodeIds.indexOf(',') !== '-1') {
        const arr = nodeIds.split(',')
        const headNodeId = parseInt(arr[1])
        const tailNodeId = parseInt(arr[2])
        this.headNode = this.$parent.getNodeComp(headNodeId)
        this.tailNode = this.$parent.getNodeComp(tailNodeId)
        // console.log(this.headNode, this.tailNode)
      }
    }
  },
  computed: {
    /**
     * 使用三次贝塞尔曲线绘制
     * @return   {String} 曲线路径
     * @Author   Jiangzhiwei
     * @datetime 2021-10-20T16:53:22+0800
     */
    d () {
      let hx, hy, tx, ty
      if (this.headNode) {
        hx = this.headNode.getTail().x
        hy = this.headNode.getTail().y
      } else {
        hx = this.head.x
        hy = this.head.y
      }
      if (this.tailNode) {
        tx = this.tailNode.getHead().x
        ty = this.tailNode.getHead().y
      } else {
        tx = this.tail.x
        ty = this.tail.y
      }
      const cx = (hx + tx) / 2
      // const cy = (hy + ty) / 2
      let dx = tx - hx
      if (dx < 0) { // 前在右，后在左
        dx = dx < -100 ? -100 : dx
        return `M ${hx} ${hy} C ${hx - dx} ${hy} ${tx + dx} ${ty} ${tx} ${ty}`
      } else { // 默认前在左，后在右
        return `M ${hx} ${hy} C ${cx} ${hy} ${cx} ${ty} ${tx} ${ty}`
      }
    },
    /**
     * 根据线条状态判断是实线还是虚线
     * @return   {Integer} 实线间距
     * @Author   Jiangzhiwei
     * @datetime 2021-10-20T16:52:09+0800
     */
    dash () {
      if (this.state === 0) {
        return 6
      } else {
        return 0
      }
    },
    /**
     * 线条颜色 包括正常颜色、移入颜色、选中颜色
     * @return   {String} 颜色值
     * @Author   Jiangzhiwei
     * @datetime 2021-10-20T16:54:28+0800
     */
    color () {
      if (this.isSelected) {
        return this.selectedColor
      } else if (this.isMouseOver) {
        return this.hoverColor
      } else {
        return this.stroke
      }
    }
  },
  watch: {
    nodeIds (newVal) {
      this.refreshNodes(newVal)
    }
  },
  mounted () {
    this.refreshNodes(this.nodeIds)
  }
}
</script>

<style>

</style>
